<template>
  <div class="main">
    <div class="top">
      <div class="breadcrumb">
        <p class="toptitle">首页</p>
        <i class="iconfont icon-youjiantou"></i>
        <p class="toptitle">商品管理</p>
        <i class="iconfont icon-youjiantou"></i>
        <p class="lasttitle">商品分类</p>
      </div>
      <Welcome></Welcome>
    </div>
    <div class="table">
      <p class="list">商品分类</p>
      <el-table :data="tableData1" style="width: 100%" row-key="id" border lazy
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
        <el-table-column prop="id" label="序号" />
        <el-table-column prop="cateName" label="分类名">
          <template #default="scope">
            <template v-if="scope.row.isEditing">
              <el-input v-model="scope.row.cateName" @keyup.enter="overEdit(scope.$index, scope.row)" />
            </template>
            <template v-else>
              {{ scope.row.cateName }}
            </template>
          </template>
        </el-table-column>
        <el-table-column label="是否启用">
          <template #default="scope">
            <el-switch v-model="scope.row.state" :active-value="1" :inactive-value="0" class="ml-2"
              style="--el-switch-on-color: #13ce66; --el-switch-off-color: #eee" :disabled="scope.row.disable">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="cateName" label="操作">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)" v-show="scope.row.disable">
              编辑
            </el-button>
            <el-button type="success" @click="overEdit(scope.$index, scope.row)" size="small"
              v-show="!scope.row.disable" style="margin-left: 0;">
              完成
            </el-button>

            <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="demo-pagination-block">
        <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" height="400px"
          :page-sizes="[5, 10, 20, 30, 40]" :size="size" :disabled="disabled" :background="background"
          layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { getcategory, updatecategory, delcategory } from "../../api/account"
// 引入 ComponentSize 类型
import type { ComponentSize } from 'element-plus'
import { ElMessage } from 'element-plus'
import Welcome from '../../components/Welcome.vue';

const input = ref('')
// 分页
const total = ref(0);
const currentPage4 = ref(1);
const pageSize4 = ref(5);
const size = ref<ComponentSize>('default');
const background = ref(false);
const disabled = ref(false);

// 处理每页数量变化
const handleSizeChange = (val: number) => {
  currentPage4.value = 1; // 重置当前页码
  page.currentPage = currentPage4.value;
  page.pageSize = val;
  goodsCate(page);
};

// 处理当前页码变化
const handleCurrentChange = (val: number) => {
  page.currentPage = val;
  page.pageSize = pageSize4.value;
  goodsCate(page);
};

// 定义数据
interface goodsCate {
  id: number
  cateName: string
  state: number
  disable: boolean
  isEditing: boolean
}

const tableData1 = ref<goodsCate[]>([])
// 获取页码
const page = {
  currentPage: 1,
  pageSize: 10
}

// 获取商品分类
const goodsCate = async (pagedata) => {
  const data = await getcategory(pagedata)
  // 处理数据，为每一行添加 disabled 属性并初始化为 true
  const processedData = data.data.map(item => ({
   ...item,
    disable: true,
    isEditing: false
  }));
  tableData1.value = processedData;
  // 这里假设接口返回的数据有 total 字段，如果没有需要调整逻辑
  total.value = data.total || processedData.length; 
  console.log(data);
  console.log(tableData1.value);
}

// 页面加载时获取第一页数据
goodsCate({ currentPage: currentPage4.value, pageSize: pageSize4.value })

// 更改商品分类
const changeCate = async (row: goodsCate) => {
  const data = await updatecategory(row)
  console.log(data);
  if (data.code === 0) { // 假设成功时返回的 code 为 0，根据实际情况修改
    ElMessage.success('分类修改成功');
  } else {
    ElMessage.error('分类修改失败');
  }
}

// 编辑
const handleEdit = (index: number, row: goodsCate) => {
  console.log('编辑', index, row)
  const newData = [...tableData1.value];
  newData[index].disable = false; // 解除当前行的禁用状态
  newData[index].isEditing = true; // 开启当前行的编辑状态
  tableData1.value = newData;
}

// 编辑完成
const overEdit = (index: number, row: goodsCate) => {
  const newData = [...tableData1.value];
  newData[index].disable = true; // 恢复当前行的禁用状态
  newData[index].isEditing = false; // 关闭当前行的编辑状态
  tableData1.value = newData;
  changeCate(row); // 编辑完成后更新分类信息
}

//删除分类
const Deletetype = async (row) => {
  const { msg ,code} = await delcategory({ id: row.id })
  console.log(msg);
  if (code === 0 ) { // 根据实际返回的成功消息修改
    ElMessage.success('分类删除成功');
    // 刷新页面
    window.location.reload()
  } else {
    ElMessage.error('分类删除失败');
  }
}

const handleDelete = (index: number, row: goodsCate) => {
  console.log(row.id);
  Deletetype(row);
}
</script>

<style scoped>
.main {
  width: 100%;
  height: 730px;
  background-color: #f0f0f0;
}

/* 中间 */
.table {
  margin: 20px;
  padding: 20px;
  border-radius: 5px;
  background-color: #fff;
  min-height: 600px;
}

.list {
  width: 100%;
  border-bottom: 1px solid #e1e1e1;
  font-size: 20px;
  margin-bottom: 20px;
  padding-bottom: 10px;
}

/* 顶部面包屑 */
.toptitle {
  font-weight: bold;
}

.top {
    width: 96%;
    height: 50px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* 内容分布在左右两侧 */
    padding: 0 20px;
    /* 添加左右内边距 */
}

.breadcrumb {
  display: flex;
  align-items: center;
  font-size: 14px;
}

.iconfont {
  font-size: 14px;
  color: #999999;
  margin: 0 5px;
}

.lasttitle {
  color: #999999;
}
</style>